// 项目信息弹出

<template>
    <van-popup class="v-info"
               v-model="visible"
               get-container="body"
               position="bottom">
        <div class="info-content">
            <h4>
                <span>{{model.engineeName}}</span>
                <van-icon @click.native.stop="fnColse()"
                          name="cross" />
            </h4>
            <p>
                <label>项目编码：</label>
                <span>{{model.engineeCode}}</span>
            </p>
            <div class="tags">
                <span v-if="model.safeOpenStatusName || model.qualityOpenStatusName"
                      class="tag tag-green-fill">{{model.safeOpenStatusName || model.qualityOpenStatusName}}</span>
                <span class="tag tag-blue-fill"
                      v-if="model.engineeTypeName">{{model.engineeTypeName}}</span>
            </div>
            <div class="address">
                <van-icon name="location" />{{model.engineeAddress}}
            </div>
            <section>
                <label>形象进度</label>
                <span>{{model.progressName}}</span>
            </section>
            <section>
                <label>建筑规模</label>
                <span>{{model.constructionScale}}{{model.scaleUnit}}</span>
            </section>
            <section>
                <label>合同金额</label>
                <span>{{model.contractPrice}}万元</span>
            </section>

            <div class="blue-div">
                <div>
                    <label>开工日期</label>
                    <span>{{model.planOpenDate}}</span>
                </div>
                <i></i>
                <div>
                    <label>合同工期</label>
                    <span>{{model.contractDuration}}天</span>
                </div>
            </div>

            <div class="detail-btn"
                 @click.stop="fnToDetail()">
                <van-icon name="orders-o" />
                <span>详细信息</span>
            </div>
        </div>
    </van-popup>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true
        },
        model: {
            type: Object,
            default: _ => ({})
        }
    },
    computed: {
        visible: {
            get () {
                return this.value
            },
            set (val) {
                this.$emit('input', val)
            }
        }
    },
    methods: {
        // 关闭组件
        fnColse () {
            this.visible = false
        },
        // 详情
        fnToDetail () {
            this.fnColse()
            this.$f7router.navigate(`/business/construction/enginee/supervise?engineeId=${this.model.engineeId}`)
        }
    }
}
</script>

<style lang="less" scoped>
@spacing: 10px;

.v-info {
    background-color: transparent;
}

.info-content {
    font-size: 14px;
    line-height: 18px;
    background: #fff;
    padding: 10px 12px;
    border-radius: 10px 10px 0 0;

    > h4 {
        font-size: 16px;
        line-height: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;

        > .van-icon {
            flex-shrink: 0;
            padding-left: 10px;
            font-size: 14px;
        }
    }

    > p {
        margin: @spacing 0 0 0;
        color: #666;

        label {
            width: 66px;
        }
    }

    .tags {
        padding: @spacing 0;
    }

    .address {
        display: flex;

        .van-icon {
            flex-shrink: 0;
            margin-right: 5px;
            font-size: 14px;
        }
    }

    section {
        flex: 1;
        display: flex;
        margin-top: @spacing;

        label {
            width: 66px;
            flex-shrink: 0;
            color: #666;
        }
    }

    .blue-div {
        display: flex;
        margin: 10px 0;

        div {
            flex: 1 0;
            background: #ebf2fd;
            display: flex;
            justify-content: space-between;
            color: #666;
            border-radius: 4px;
            padding: 10px;

            label {
                width: 60px;
                flex-shrink: 0;
            }

            span {
                font-weight: 600;
            }
        }

        > i {
            width: 10px;
            flex-shrink: 0;
        }
    }

    .detail-btn {
        background: #f0f2f5;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #3385ff;
        padding: 12px 10px;

        .van-icon {
            margin-right: 5px;
            font-size: 14px;
        }
    }
}
</style>
